<template>
<div>
    <div class="header">
        <div class="header-lift" :class="{collapsed:collapsed}">
          <div class="img-body">
            <img src="@/assets/images/login/logo2.png"/>
          </div>
          <span>智能防控平台</span>
        </div>
        <div class="header-right">
            <div class="home-message">
              <!-- <span class="message">你本次登录时间为{{time}}，登录IP:{{user.loginIP}}。</span> -->
              <marquee style="font-size:20px;margin-top: -7px;" direction="left" behavior="scroll" scrollamount="6" scrolldelay="0" loop="-1" width="1000"  height="50" hspace="10" vspace="10">
                <!-- <img src="@/assets/images/icon-warning.png" /> -->
                {{user.roleName}}网络安全通报中心
              </marquee>
              <!-- <span class="message">欢迎使用通报平台管理系统(V1.0),你本次登录时间为{{time}}，登录IP:{{user.loginIP}}。</span> -->
            </div>
            <!-- <div class="breadcrumb" v-else>
              <img src="@/assets/images/icon-home.png"/>
              <p>{{$store.state.breadcrumb.text}}</p>
              
            </div> -->
        </div>
        <div class="isLogin">
            <div class="user-info">
                <a-dropdown :trigger="['click']">
                    <div class="dropdown" @click.prevent>
                        <!-- <img src="@/assets/images/avatar.png" class="avatar" /> -->
                        <span class="username">{{user.loginId}}</span>
                        <CaretDownFilled />
                    </div>
                    <template #overlay>
                        <a-menu>
                            <!-- <a-menu-divider /> -->
                            <a-menu-item key="3" @click="logout()">退出登录</a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { CaretDownFilled } from "@ant-design/icons-vue";
import httpRequest from "@/util/httpRequest";
// import { setTimeout } from 'timers';
export default {
  name: "Header",
  components: {
    CaretDownFilled
  },
  props: {
    routeName: {
      type: String,
      default: ""
    },
    collapsed:{
      type:Boolean,
      default: false
    }
  },
  data() {
    return {
      newTime:'',
      time:'',
      user: {}
    };
  },
  mounted() {
    document.title = '南通经济技术开发区网安智能防控平台';
    if (localStorage.getItem("user")) {
      this.user = JSON.parse(localStorage.getItem("user"));
    }
    this.time = this.getTime(this.user.loginTime);
    // this.newTime = this.getTime('','new')
    // this.outlock();
  },
  methods: {
    outlock(){
      setTimeout(() =>{
        this.newTime = this.getTime('','new');
        this.outlock();
      },1000);
    },
    logout() {
      httpRequest.post("登出", {}).then(() => {
        localStorage.removeItem("user");
        localStorage.removeItem("token");
        this.$router.push("/login");
      });
    },
    back() {
      this.$router.go(-1);
    },
    getTime(v,type){
      let time='';
      const date = type == 'new' ? new Date() : new Date(v);
      const year = date.getFullYear();
      var month = date.getMonth()+1;
      month = month>9 ? month :'0' + month;
      var day = date.getDate();
      day = day > 9 ? day:'0' + day;
      var hh = date.getHours();
      hh= hh>9 ? hh:'0'+hh;
      var mm = date.getMinutes();
      mm= mm>9 ? mm:'0'+mm;
      var ss = date.getSeconds();
      ss= ss>9 ? ss:'0'+ss;
      // var ms = date.getMilliseconds();
      if(type=='new'){
        time = year +'-' + month + '-' + day + ' ' + hh + ':' + mm + ':' + ss ;
      }else{
        time = year +'年' + month + '月' + day + '日' + hh + '点' + mm + '分' + ss + '秒'  ;
      }
      return time;
    }
  }
};
</script>
<style scoped lang="less">
.header {
  height: 72px;
  display: flex;
  background: #fff;
  align-items: center;
  justify-content: space-between;
  .header-lift {
    display: flex;
    background: #030b27;
    height: 72px;
    width: 240px;
    text-align: center;
    transition: width 0.2s;
    .img-body {
      margin-left: 25px;
      width: 38px;
      height: 38px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    span {
      font-size: 23px;
      font-weight: bold;
      color: #fff;
      margin: 5px 10px;
      white-space: nowrap;
    }
    &.collapsed{
      width: 60px;
      span{
        display: none;
      }
      .img-body{
        margin:0 auto;
      }
    }
  }
  .header-right {
    flex-grow: 1;
    margin-left: 36px;
    text-align: left;
    font-size: 16px;
    color: #333333;
    .i-p {
      padding: 10px;
    }
    a {
      color: #999999;
    }
  }
}
.home-message {
  display: flex;
  align-items: center;
  img {
    margin-right: 10px;
  }
  .time {
    color: #999;
  }
}
.breadcrumb {
  display: flex;
  align-items: center;
  
  img {
    margin-right: 5px;
  }
  p {
    font-size: 12px;
    color: #555;
    line-height: normal;
    margin: 0;
  }
}
.isLogin {
  background: #fff;
  padding-right: 50px;
  .no-login {
    display: flex;
    align-items: center;
    a {
      font-size: 18px;
      color: #333;
      margin: 0 15px;
    }
  }
  .dropdown {
    cursor: default;
    .avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
    }
    .username {
      margin: 0 10px;
    }
  }
}
</style>
